<template>
  <div>
    <div class="card" style="line-height: 30px">
      <div><h3>欢迎进入企业开发管理！</h3></div>


      <!-- 日期选择 -->
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">选择时间段</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
          <el-button style="margin: 10px;"  @click="load()" type="primary" round>确认时间</el-button>
        </div>
      </div>
      <div><h3>项目完成进度：</h3></div>
      <div class="demo-progress">
        <el-progress :percentage="data.percentage" :stroke-width="15" striped />
        <el-row>
          <el-col :span="8"><el-statistic title="总的项目" :value="data.total_project" /></el-col>
          <el-col :span="6"><el-statistic title="已完成项目" :value="data.success_project" /></el-col>
          <el-col :span="6"><el-statistic title="未完成项目" :value="data.failed_project"></el-statistic></el-col>
        </el-row>
      </div>
      <div>
        <h3>文件上传情况：</h3>
        <el-table :data="data.tableData" style="width: 100%">
          <el-table-column prop="time" label="上传时间" />
          <el-table-column prop="file_name" label="文件名" />
          <el-table-column prop="file_type" label="文件类型" />
        </el-table>
      </div>   
    </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const store=useStore()

const data=reactive({
  employee_id:store.state.employeeInfo.staff_id,
  starTime:0,
  endTime:0,
  percentage:100,
  total_project:0,
  success_project:0,
  failed_project:0,
  tableData:[],

})

const value1 = ref('')

const load=()=>{
  // 获取开始日期
  data.starTime = value1.value[0];
  // 获取结束日期
  data.endTime = value1.value[1];
  // console.log("开始日期:", data.starTime);
  // console.log("结束日期:", data.endTime);
  // 将日期转换为时间戳
  const starTime = new Date(data.starTime).getTime();
  const endTime = new Date(data.endTime).getTime();

  // console.log("开始日期时间戳:", timestamp);
  console.log(data.employee_id)
  const formdata = new FormData();
  formdata.append('employeeId', data.employee_id);
  formdata.append('startTime', starTime);
  formdata.append('endTime', endTime);

  //获取已完成项目
  axios.post('http://localhost:8088/POST/GetCountDoneProjectByEmployeeAndTimePeriod', formdata).then(res => {
    // console.log(res);
    data.success_project=res.data.data.Counts
    // console.log(data.success_project)
    //获取所有项目
  axios.post('http://localhost:8088/POST/GetDoneProjectByEmployeeAndTimePeriodList', formdata).then(res3 => {
    // console.log("res3,",res3.data.data.Counts.length);
    data.total_project=res3.data.data.Counts.length
    data.failed_project=data.total_project-data.success_project
    // data.percentage=(data.success_project/data.total_project)*100
    data.percentage = parseFloat(((data.success_project / data.total_project) * 100).toFixed(1));
  });
  });

  //获取文件上传情况
  axios.post('http://localhost:8088/POST/GetUploadedFilesByEmployeeAndTimePeriodList',formdata).then(res2=>{
    // console.log(res2)
    data.tableData=res2.data.data.Counts
    console.log(data.tableData[0].date)

    for(let i=0;i<data.tableData.length;i++){
      const date=new Date(data.tableData[i].date)
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      data.tableData[i].time=formattedDate
      console.log(data.tableData[i].time)
    }
  })

}
</script>




<style scoped>
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 0;
  padding-bottom:0;
  text-align: left;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>